<template>
<div class="select-source-images">
    <div class="attributes clearfix">
        <div class="attribute">
          <label class="name">类型：</label>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </div>
        <div class="attribute">
            <label class="name">上传时间：</label>
            <el-date-picker
              v-model="value1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
        </div>
        <div class="attribute">
            <span class="name">学段：</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                 v-for="item in options"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
                </el-option>
              </el-select>
        </div>
        <div class="attribute">
            <span class="name">学科：</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                 v-for="item in options"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
                </el-option>
              </el-select>
        </div>
    </div>
    <div class="search">
         <el-input
           placeholder="请输入内容"
           prefix-icon="el-icon-search"
           v-model="input2">
         </el-input>
         <el-button type="primary">查询</el-button>
    </div>
    <div class="images" v-infinite-scroll="load">
        <div class="image" fit="contain"  v-for="url in urls" :key="url">
           <el-image :src="url" :preview-src-list="urls"></el-image>
           <el-checkbox v-model="checked"></el-checkbox>
        </div>
    </div>
    <div class="tool-buttons">
        <el-button>取消</el-button>
        <el-button type="primary">确定选择</el-button>
    </div>
</div>
</template>  
<script>
export default{
    data() {
      return {
          options:[
            {}
          ],
          input2:'',
          value1:'',
          value:'',
          checked: true,
          urls: [
          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
        ]
        };
    },
    methods: {
     load () {
        
      }
    }
}
</script>   
<style scoped lang="scss">
.select-source-images{
    width:813px;
    //background: #fff;
   // padding:30px 30px 32px;
   // border-radius: 4px;
    .pop-name{
        font-size: 18px;
        color: #0F1B41;
        line-height: 18px;
    }
    .attributes{
        .attribute{
            margin-left:30px;
            float:left;
            &:first-child{
                margin-left:0;
            }
        }
        .el-select{
            width:92px;
        }
        .el-date-editor--datetimerange{
            width:227px;
            height:36px;
        }
    }
    .search{
        margin-top:20px;
        .el-input{
            width:693px;
        }
        .el-button{
            float:right;
            width:100px;
        }
    }
    .images{
        margin:15px -5px 0;
        height:400px;
        overflow: auto;
        .image{
            margin:20px 5px 0;
            float:left;
            width:195px;
            height:103px;
            text-align: center;
            background: #F0F0F0;
            border-radius: 2px;
        }
        .el-image{
            margin:5px 5px 0;
            width:185px;
            height:70px;
        }
       
    }
    .tool-buttons{
        padding-top:32px;
        text-align: center;
        border-top:1px solid #E4EAEE;
    }
}
</style>